<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-date"></i> 表单</el-breadcrumb-item>
                <el-breadcrumb-item>帮助编辑/添加</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="form-box mt">
            <el-form ref="form" label-position="left" :rules="rules" :model="form" label-width="80px">
                <el-form-item label="学校名称" prop="school_id" v-if="!add">
                  <el-input v-model="school_name" style="width: 200px;"></el-input>
                  <el-button type="primary" icon="el-icon-search" @click="schoolSearch">搜索</el-button>
                  <el-select v-model="form.school_id" placeholder="请选择" v-if="school_list">
                    <el-option
                      v-for="item in school_list"
                      :key="item.id"
                      :label="item.school_name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="学生姓名" prop="school_id" v-if="!add">
                  <el-input v-model="student_name" style="width: 200px;"></el-input>
                  <el-button type="primary" icon="el-icon-search" @click="studentSearch">搜索</el-button>
                  <el-select v-model="form.student_id" placeholder="请选择" v-if="student_list">
                    <el-option
                      v-for="item in student_list"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="号码牌数" prop="num">
                    <el-input v-model="form.num"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit('form')">提交</el-button>
                    <el-button @click="navTop">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import bus from '../../../bus.js';
export default {
  name: 'v-form',
  data: function() {
    return {
      add: false,
      school_name: undefined,
      school_list: null,
      student_name: undefined,
      student_list: null,
      form: {
        school_id: undefined,
        student_id: undefined,
        num: undefined
      },
      rules: {
        school_id: [
            { required: true, message: '此项必填' }
        ],
        num: [
            { required: true, message: '此项必填' }
        ]
      }
    }
  },
  methods: {
    onSubmit(formName) {
      //  进行规则验证
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.add) {
            APP.ajax('post@num/edit', 
            { id: this.$route.params.id,
              num: this.form.num }, res => {
              if (res.data.status === 200) {
                this.$message.success('编辑成功!')
                history.go(-1)
              } else {
                this.$message({
                  message: res.data.msg,
                  type: 'warning'
                })
              }
            })
          } else {
            APP.ajax('post@num/add', this.form, res => {
              if (res.data.status === 200) {
                  this.$message.success('添加成功！');
                  this.form = null;
              } else {
                this.$message({
                  message: res.data.msg,
                  type: 'warning'
                });
              }
            })
          }
        } else {
          return false;
        }
      });
    },
    navTop() {
      if (this.add) {
        history.go(-1)
      } else {
        bus.$emit('ViewShow', '取消')
      }
    },
    schoolSearch() {
      APP.ajax('post@school/search', {
        province: '',
        city: '',
        area: '',
        school_name: this.school_name
      }, res => {
        this.school_list = res.data.data.data;
        // 当重新获取学校时，学生列表当清除，表单学生id当清除
        this.form.school_id = undefined;
        this.student_list = null;
        this.form.student_id = undefined;
      });
    },
    studentSearch() {
      APP.ajax('post@student/search', {
        school_id: this.form.school_id,
        name: this.student_name
      }, res => {
        this.student_list = res.data.data.data;
      });
    }
  },
  mounted () {
    if(this.$route.params.id){
      this.add = true;
    }
  }
}
</script>
<style scoped>
.avatar{
    float: left;
    width: 100%;
    height: 100%;
}
</style>

